import Taro from '@tarojs/taro'
import { View, Text, Form, Button } from '@tarojs/components'

import { getCode, login } from '../../api/login'
import { showToast, isPhone } from '../../utils'

import FormGroup from '../../components/formGroup'

import './index.less'

class Login extends Taro.Component {
	config = {
		navigationStyle: 'custom',
    navigationBarTextStyle: 'white'
	}

	state = {
		isCountDown: false,
		countNumber: 60,
		form: {
			phone: '',
			code: ''
		},
		isShowHeader: true
	}

	// 双向绑定数据
	handleInput = (key, e) => {
		const value = e.target.value

		this.setState({
			form: {
				...this.state.form,
				[key]: value
			}
		})
	}

	// 清除输入框
	handleClear = key => {
		this.setState({
			form: {
				...this.state.form,
				[key]: ''
			}
		})
	}

	// 获取验证码
	getCode = async () => {
		Taro.showLoading()

		const { phone } = this.state.form
		const res = await getCode({mobile: phone})
		
		Taro.hideLoading()

		if (res.code === 1) {
			this.setState({
				isCountDown: true
			}, () => {
				const timer = setInterval(() => {
					this.setState({
						countNumber: this.state.countNumber - 1
					})

					if (this.state.countNumber === 0) {
						clearInterval(timer)
						
						this.setState({
							isCountDown: false,
							countNumber: 60
						})
					}
				}, 1000)
			})
		} else {
			showToast(res.message)
		}
	}

	// 登录
	handleSubmit = async () => {
		const { phone, code } = this.state.form

		if (!(isPhone(phone) && code)) return

		Taro.showLoading()

		const res = await login({mobile: phone, vcode: code})

		Taro.hideLoading()

		if (res.code === 1) {
			showToast('登录成功！')
			
			Taro.setStorage({
				key: 'token',
				data: res.data.token
			})

			Taro.setStorage({
				key: 'id',
				data: res.data.id
			})

			Taro.setStorage({
				key: 'levelId',
				data: res.data.levelId
			})

			Taro.navigateTo({
				url: '/pages/home/index'
			})
		} else {
			showToast(res.message)
		}
	}

	onKeyboardHeightChange = res => {
		const height = res.detail.height

		Taro.setNavigationBarColor({
			backgroundColor: '#ffffff',
			frontColor: height ? '#000000' : '#ffffff'
		})

		this.setState({
			isShowHeader: !height
		})
	}

	render() {
		const {
			isCountDown,
			countNumber,
			form,
			isShowHeader
		} = this.state
		
		return (
			<View className={ `login-wrap ${ isShowHeader ? '' : 'focus' }` }>
				<Text className="title">合伙人登录平台</Text>
				<Form onSubmit={ this.handleSubmit }>
					<FormGroup
						label="手机号"
						type="number"
						value={ form.phone }
						placeholder="请输入手机号码"
						input={ this.handleInput.bind(this, 'phone') }
						clear={ this.handleClear.bind(this, 'phone') }
						keyboardHeightChange={ this.onKeyboardHeightChange }
						confirm={ this.handleSubmit }
					/>
					<FormGroup
						label="验证码"
						type="number"
						value={ form.code }
						placeholder="请输入验证码"
						input={ this.handleInput.bind(this, 'code') }
						clear={ this.handleClear.bind(this, 'code') }
						keyboardHeightChange={ this.onKeyboardHeightChange }
						confirm={ this.handleSubmit }
					>
						<Button
							className="code-btn"
							hoverClass="btn-active"
							onClick={ this.getCode }
							disabled={ !isPhone(form.phone) || isCountDown ? true : false }
						>
							{ isCountDown ? countNumber + 'S' : '获取验证码' }
						</Button>
					</FormGroup>
					<View className="login">
						<Button
							hoverClass="btn-active"
							formType="submit"
							disabled={ isPhone(form.phone) && form.code ? false : true }
						>登录</Button>
						<Text>仅限希朗AI课堂代理商登录使用</Text>
					</View>
				</Form>
			</View>
		)
	}
}

export default Login